<template>
  <img class="demo_img" src="@/assets/img/l_r/密码不可见.svg" @click="hideShowPsw">
</template>

<script>
export default {
  name:'Visible',
  data() {
    return {
      demoImg:{},
      demoInput:{},
    }
  },
  methods: {
    //隐藏text block，显示password block
    hideShowPsw(){
        // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
        this.demoImg = document.getElementsByClassName[0]("demo_img"),
        this.demoInput = document.getElementsByClassName[0]("demo_input")
        if (this.demoInput.type == "password") {
            this.demoInput.type = "text";
            this.demoImg.src = require('@/assets/img/l_r/密码可见.svg');
        }else {
            this.demoInput.type = "password";
            this.demoImg.src = require('@/assets/img/l_r/密码不可见.svg');
        }
    },
  },
}
</script>

<style scoped>

#demo_img{
  width: 40px;
  height: 25px;
  position: absolute;  
  top: 50%;
  right: 0px; 
  transform: translate(0,-50%);
  margin-right: 15px; 
  display: block;
  z-index: 999;
  }
</style>